<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .layout div{
        min-height: 100px;
    }
    .layout{
        height: 100vh;
        display: flex;
        /*? 必须的撒*/
        flex-direction: column;
    }
    .top{
        background-color: red;
    }
    .bottom{
        background-color: blue;
    }
    .center{
        flex: 1;
        background-color: yellow;
        overflow: auto;
    }
</style>
<body>
<section class="layout">
    <div class="top"></div>
    <div class="center">
        <h1>flexbox解决方案</h1>
        <p>这是三栏布局中间部分</p>
        <p>这是三栏布局中间部分</p>
    </div>
    <div class="bottom"></div>
</section>
<script>

</script>
</body>

</html>
